<template>
  <div class="container">
    <div id="placeholder"></div>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import axios from 'axios'
import {ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'

const router = useRouter();
const route = useRoute();
const docEditor = ref(null)

const getConfig = () => {
  axios.get('http://192.168.10.168:88/dev-api/file/config', {
    params: {
      fileId: route.params.fileId,
      mode: 'VIEW',
      userId: route.query.userId
    }
  }).then(res => {
    let config = res.data.data
    config.events = {
      onRequestUsers,
      onRequestRename
    }
    docEditor.value = new DocsAPI.DocEditor("placeholder", res.data.data);
  })
}

const onRequestUsers = (event) => {
  const c = event.data.c
  const id = event.data.id

  console.log('onRequestUsers', event)
};

const onRequestRename = (event) => {
  console.log('onRequestRename', event)
  axios.put('http://192.168.10.168:88/dev-api/file/rename', {
    fileId: route.params.fileId,
    newFileName: event.data
  }).then(res => {
    ElMessage.success('重命名成功')
    setTimeout(() => {
      location.reload();
    }, 500)
  })
}

getConfig()
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  padding: 20px;
}

iframe {
  height: 100vh;
  width: 100vw;
}
</style>